<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板操作日志管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/common.css">
</head>
<body>
<div class="container">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>优惠券模板操作日志</h2>
    </div>

    <!-- 搜索栏 -->
    <div class="search-bar">
        <div class="row g-3">
            <div class="col-md-3">
                <input type="text" id="searchTemplateId" class="form-control" placeholder="输入模板ID搜索">
            </div>
            <div class="col-md-3">
                <input type="text" id="searchOperatorId" class="form-control" placeholder="输入操作人ID搜索">
            </div>
            <div class="col-md-3">
                <input type="date" id="searchStartDate" class="form-control">
            </div>
            <div class="col-md-3">
                <input type="date" id="searchEndDate" class="form-control">
                <button class="btn btn-success w-100 mt-2" onclick="queryLogList(1)">搜索</button>
            </div>
        </div>
    </div>

    <!-- 操作日志列表 -->
    <div class="card">
        <div class="card-body">
            <table class="table table-hover table-bordered">
                <thead class="table-primary">
                <tr>
                    <th>日志ID</th>
                    <th>模板ID</th>
                    <th>模板名称</th>
                    <th>店铺编号</th>
                    <th>操作人ID</th>
                    <th>操作内容</th>
                    <th>操作时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="logTableBody">
                <tr><td colspan="8" class="text-center">加载中...</td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 分页 -->
    <div id="pagination-container"></div>
</div>

<!-- 查看日志详情弹窗 -->
<div class="modal fade" id="logDetailModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">操作日志详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3 mb-3">
                    <div class="col-md-3">
                        <label class="form-label fw-bold">日志ID：</label>
                        <span id="logDetailId"></span>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold">模板ID：</label>
                        <span id="logDetailTemplateId"></span>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold">模板名称：</label>
                        <span id="logDetailTemplateName"></span>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold">店铺编号：</label>
                        <span id="logDetailShopNumber"></span>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold">操作人ID：</label>
                        <span id="logDetailOperatorId"></span>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold">操作内容：</label>
                        <span id="logDetailOperation"></span>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold">操作时间：</label>
                        <span id="logDetailCreateTime"></span>
                    </div>
                </div>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-bold">原始数据：</label>
                        <pre id="logDetailOriginalData" class="bg-light p-3 rounded overflow-auto" style="max-height: 300px;"></pre>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold">修改后数据：</label>
                        <pre id="logDetailModifiedData" class="bg-light p-3 rounded overflow-auto" style="max-height: 300px;"></pre>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="../js/common.js"></script>
<script>
    let currentPage = 1;
    const pageSize = 10;

    window.onload = function () {
        queryLogList(currentPage);
    };

    // 查询操作日志列表
    async function queryLogList(pageNum) {
        try {
            const templateId = document.getElementById("searchTemplateId").value;
            const operatorId = document.getElementById("searchOperatorId").value;
            const startDate = document.getElementById("searchStartDate").value;
            const endDate = document.getElementById("searchEndDate").value;

            const res = await axios.get("/api/coupon-template-logs/page", {
                params: {
                    pageNum,
                    pageSize,
                    couponTemplateId: templateId || undefined,
                    operatorId: operatorId || undefined,
                    startDate: startDate || undefined,
                    endDate: endDate || undefined
                }
            });

            const { records, total } = res.data;
            currentPage = pageNum;
            const tableBody = document.getElementById("logTableBody");
            tableBody.innerHTML = "";

            if (records.length === 0) {
                tableBody.innerHTML = '<tr><td colspan="8" class="text-center">暂无操作日志</td></tr>';
                return;
            }

            records.forEach(log => {
                const row = `
                        <tr>
                            <td>${log.id}</td>
                            <td>${log.couponTemplateId}</td>
                            <td>${log.couponTemplate?.name || "未知模板"}</td>
                            <td>${log.shopNumber}</td>
                            <td>${log.operatorId}</td>
                            <td>${log.operationLog}</td>
                            <td>${Common.formatDate(log.createTime)}</td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary" onclick="viewLogDetail(${log.id})">查看详情</button>
                            </td>
                        </tr>
                    `;
                tableBody.innerHTML += row;
            });

            Common.renderPagination(total, pageNum, pageSize, queryLogList);
        } catch (err) {
            Common.errorMsg("查询操作日志失败：" + err.message);
            document.getElementById("logTableBody").innerHTML = '<tr><td colspan="8" class="text-center">查询失败</td></tr>';
        }
    }

    // 查看日志详情
    async function viewLogDetail(logId) {
        try {
            const res = await axios.get(`/api/coupon-template-logs/${logId}`);
            const log = res.data;

            // 填充基础信息
            document.getElementById("logDetailId").textContent = log.id;
            document.getElementById("logDetailTemplateId").textContent = log.couponTemplateId;
            document.getElementById("logDetailTemplateName").textContent = log.couponTemplate?.name || "未知模板";
            document.getElementById("logDetailShopNumber").textContent = log.shopNumber;
            document.getElementById("logDetailOperatorId").textContent = log.operatorId;
            document.getElementById("logDetailOperation").textContent = log.operationLog;
            document.getElementById("logDetailCreateTime").textContent = Common.formatDate(log.createTime);

            // 格式化JSON数据
            const formatJson = (jsonStr) => {
                try {
                    return jsonStr ? JSON.stringify(JSON.parse(jsonStr), null, 2) : "{}";
                } catch (e) {
                    return jsonStr || "{}";
                }
            };

            document.getElementById("logDetailOriginalData").textContent = formatJson(log.originalData);
            document.getElementById("logDetailModifiedData").textContent = formatJson(log.modifiedData);

            new bootstrap.Modal(document.getElementById("logDetailModal")).show();
        } catch (err) {
            Common.errorMsg("加载日志详情失败：" + err.message);
        }
    }
</script>
</body>
</html>